
<template>
  <div class="showarticle">
    <h1>{{ article.title }}</h1>
    <div>{{ article.content }}</div>
    <p style="text-align: left">更新时间：{{ article.createTime }}</p>
    <nuxt-link :to="{ path:'/article'}">返回</nuxt-link>
  </div>
</template>

<script>
import axios from '~/plugins/axios';

async function get(id){
  const {data} = await axios.get('/articledetail/' + id);
  return data;
}

export default {
  layout:'detail',

  async asyncData ({ params }) {
       let article = await get(params.id);
       // article.content = article.content.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp');
       // console.log("article",article)
       return {article};
   },
}
</script>

<style scoped>
  .showarticle {
    height: 1500px;
    width: 100%;
    background-image: url(/images/bgimg_l.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
  }
  .showarticle > h1 {
    margin: 0px;
    padding: 200px 0 0 0;
    text-align: center;
  }
  .showarticle > div {
    height: 60%;
    width: 70%;
    padding: 100px 250px;
    font-size: 32pt;
    overflow-y: scroll;
    white-space:pre-line;
    word-break: break-all;
    word-wrap: break-word;
  }
  .showarticle > p {
    margin: 0px 200px;
  }
  .showarticle > a {
    text-decoration: none;
    padding: 0 20px;
    font-weight: bold;
    position: absolute;
    bottom: 60px;
    right: 100px;
  }
  .showarticle > a:link, .showarticle > a:visited {
    color: #333;
  }
  .showarticle > a:hover, .showarticle > a:active {
    font-size: 28pt;
    color: #ff9900;
  }

</style>
